<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>评教管理系统-老师列表</title>
</head>
<link th:href="@{/plugin/layui/css/layui.css}" rel="stylesheet"/>
<script type="text/javascript" th:src="@{/plugin/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/js/common.js}"></script>
<body>
<div class="demoTable">
    <div class="layui-form" action="">
        <button class="layui-btn" id="add">
            <i class="layui-icon">&#xe654;</i>添加
        </button>
        <div class="layui-inline">
            <input class="layui-input" name="teaRealname" id="teaRealname" placeholder="教师名称搜索" autocomplete="off">
        </div>
        <button class="layui-btn" data-type="reload">搜索</button>
    </div>
</div>
<table class="layui-hide" id="test" lay-filter="table"></table>
</body>
<script type="text/html" id="toolBar">
    <a class="layui-icon" style="font-size: 25px; color: #1AA094;" lay-event="edit">&#xe642;</a>
    <a class="layui-icon" style="font-size: 25px; color: #1AA094;" lay-event="del">&#xe640;</a>
</script>
<script type="text/html" id="sexTpl">
    {{#  if(d.teaSex ==0){ }}
    {{'女'}}
    {{#  }  else { }}
    {{'男'}}
    {{#  } }}
</script>
<script>
    layui.use(['form', 'layer', 'table'], function () {
        var table = layui.table
            , form = layui.form, $ = layui.$;

        table.render({
            elem: '#test'  //绑定table id
            , url: 'teacher/select'  //数据请求路径
            , cellMinWidth: 80
            , cols: [
                [
                {type: 'numbers'}
                , {field: 'teaId', title: '教师ID'}
                , {field: 'teaBianhao', title: '编号'}
                , {field: 'teaRealname', title: '教师真实名称'}
                , {field: 'teaSex', title: '性别',templet: '#sexTpl'}
                , {field: 'teaAge', title: '年龄'}
                , {field: 'loginName', title: '登录名'}
                , {field: 'loginPw', title: '登录密码'}
                , {fixed: 'right', title: '操作', width: 180, align: 'center', toolbar: '#toolBar'}//一个工具栏  具体请查看layui官网
            ]
            ]
            , page: true   //开启分页
            , limit: 10   //默认十条数据一页
            , limits: [10, 20, 30, 50]  //数据分页条
            , id: 'testReload'
        });

        active = {
            reload: function () {
                var teaRealname = $.trim($('#teaRealname').val());
                table.reload('testReload', {
                    where: {
                        teaRealname: teaRealname
                    }
                });
            }
        };
        table.on('tool(table)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('确认要删除吗？', function (index) {
                    $.ajax({
                        type: 'POST',
                        url: "teacher/delete",
                        dataType: 'json',
                        contentType: 'application/json',
                        data: JSON.stringify(data),
                        success: function (result) {// 返回的RequestResult的json对象
                            if(result.code==100){
                                obj.del();
                                layer.close(index);
                            }else {
                                layer.msg('删除失败！请重试');
                            }
                        },
                    });
                });
                //编辑
            } else if (obj.event === 'edit') {
                var json = eval('(' + JSON.stringify(data) + ')');//String转json
                layerOpen('teacherAdd?teaId=' + json['teaId'], '编辑老师信息', '670px;', '500px;');
            }
        });
        <!-- 查询框中查询按钮click事件 最终调用的是上面的那个active方法-->
        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        $('.demoTable #add').on('click', function(){
            layerOpen('teacherAdd','添加老师信息','670px;', '500px;');
        });

    });
</script>
</html>